<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>秒杀商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>秒杀商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="good_table">
        <el-row :gutter="20">
          <div class="demo-input-suffix" style="float: left">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="商品名称">
                <el-input
                  v-model="good_queryInfo.query"
                  placeholder="商品名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getGoodList">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="good_add_dialogVisible = true"
                  >添加商品</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-row>
        <template>
          <el-table :data="good_tableDate" border stripe style="width: 100%">
            <el-table-column type="index"> </el-table-column>
            <el-table-column prop="seckillProductId" label="秒杀商品ID">
            </el-table-column>
            <el-table-column prop="sexShops.shopName" label="商品名称">
            </el-table-column>
            <el-table-column prop="sexShops.shopPrice" label="商品单价">
            </el-table-column>
            <el-table-column prop="stockNumber" label="商品库存">
            </el-table-column>
            <el-table-column prop="startTime" label="秒杀商品开始时间">
              <template slot-scope="scope">
                {{ new Date(scope.row.startTime).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="秒杀商品结束时间">
              <template slot-scope="scope">
                {{ new Date(scope.row.endTime).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="秒杀商品上架时间">
              <template slot-scope="scope">
                {{ new Date(scope.row.createTime).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="goodset" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="showEditMessage(scope.$index)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteGood(scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="good_queryInfo.pagenum"
            :page-sizes="[1, 3, 6, 9, 12]"
            :page-size="good_queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="good_pageTotal"
            :enterable="false"
          >
          </el-pagination>
        </template>
        <el-dialog
          title="添加秒杀商品"
          :visible.sync="good_add_dialogVisible"
          width="50%"
          @close="closeAddDialog"
        >
          <el-form
            :model="good_addForm"
            status-icon
            :rules="good_addFormRules"
            ref="good_addFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="选择秒杀商品" prop="SexShopId">
              <el-select
                v-model="good_addForm.SexShopId"
                placeholder="选择秒杀商品"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-date-picker
                v-model="good_addForm.StartTime"
                type="datetime"
                placeholder="选择秒杀开始时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="good_addForm.EndTime"
                type="datetime"
                placeholder="选择秒杀结束时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="商品库存" prop="ShopStock">
              <el-input
                v-model="good_addForm.StockNumber"
                placeholder="请输入商品库存"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态" prop="ShopState">
              <div>
                <el-radio v-model="good_addForm.Status" label="1" border
                  >秒杀未开始</el-radio
                >
                <el-radio v-model="good_addForm.Status" label="2" border
                  >秒杀已结束</el-radio
                >
                <el-radio v-model="good_addForm.Status" label="3" border
                  >秒杀中.....</el-radio
                >
              </div>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="good_add_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="uploadimg">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="修改商品"
          :visible.sync="good_update_dialogVisible"
          width="50%"
          @close="closeAddDialog"
        >
          <el-form
            :model="good_updateForm"
            status-icon
            :rules="good_updateFormRules"
            ref="good_updateFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
             <el-form-item label="选择秒杀商品" prop="SexShopId">
              <el-select
                v-model="good_addForm.SexShopId"
                placeholder="选择秒杀商品"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-date-picker
                v-model="good_addForm.StartTime"
                type="datetime"
                placeholder="选择秒杀开始时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="good_addForm.EndTime"
                type="datetime"
                placeholder="选择秒杀结束时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="商品库存" prop="ShopStock">
              <el-input
                v-model="good_addForm.StockNumber"
                placeholder="请输入商品库存"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态" prop="ShopState">
              <div>
                <el-radio v-model="good_addForm.Status" label="1" border
                  >秒杀未开始</el-radio
                >
                <el-radio v-model="good_addForm.Status" label="2" border
                  >秒杀已结束</el-radio
                >
                <el-radio v-model="good_addForm.Status" label="3" border
                  >秒杀中.....</el-radio
                >
              </div>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="good_add_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitUpdateForm"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="fileVisble" width="50%">
          <img :src="filePath" style="width: 100%" />
        </el-dialog>
        <el-dialog title="提示" :visible.sync="fileVisble" width="50%">
          <img :src="filePath" style="width: 100%" />
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  created() {
    //文档就绪函数加载商品数据
    this.getSeckliilebin()
    this.getGoodList()
    this.getGoodrecyclebin()
    
    
    
  },
  data() {
    return {
      recyclebin: false,
      //上传文件需要的参数
      dataList: '',
      dialogImageUrl: '',
      //上传文件需要的参数
      disabled: false,
      good_tableDate: [],
      good_recyclebin: [],
      good_queryInfo: {
        query: '',
        price: '',
        pagenum: 1,
        pagesize: 3,
      },
      good_pageTotal: 0,
      good_queryInfos: {
        querys: '',
        prices: '',
        pagenums: 1,
        pagesizes: 3,
      },
      good_pageTotals: 0,
      good_add_dialogVisible: false, //添加用户对话框
      good_update_dialogVisible: false, //修改用户信息对话框
      guigess: false, //添加商品规格的对话框
      //商品添加时的表单数据
      good_addForm: {
        SeckillProductId: '',
        SexShopId: '',
        StockNumber: '',
        StartTime: '1',
        EndTime: '',
        CreateTime: '',
        Status: '',
      },

      //这是修改商品的表单数据
      good_updateForm: {
        SeckillProductId: '',
        SexShopId: '',
        StockNumber: '',
        StartTime: '',
        EndTime: '',
        CreateTime: '',
        Status: '1',
      },
     
      fileList: [],
      options: [],
      filePath: '',
      fileVisble: false,
    }
  },
  methods: {
    getSeckliilebin() {
      
        this.axios
          .get('https://localhost:44379/api/Seckill/GetSeckill')
          .then((res) => {
            console.log(res.data.data, '下拉数据')
            //限时完成后的回调
            this.options = res.data.data
          })
    },
    uploadimg() {
      this.$refs.upload.submit();
    },
    handleUploadError(response, file, fileList) {
      this.$message.error(JSON.parse(response.message).msg)
    },

    //格式化表格数据
    formatter(row, column) {
      if (row.shopState == 1) {
        return '上架'
      } else if (row.shopState == 0) {
        return '下架'
      }
    },
    //商品的显示
    getGoodList() {
      this.axios
        .get('https://localhost:44379/api/Seckill/GetSeckillProductData', {
          ///api/SexShop_Model/Update
          params: {
            //传参
            shopName: this.good_queryInfo.query,
            pageIndex: this.good_queryInfo.pagenum,
            pageSize: this.good_queryInfo.pagesize,
          },
        })
        .then((res) => {
          console.log(res.data.data.data, '数据')
          //限时完成后的回调
          this.good_tableDate = res.data.data.data
          this.good_pageTotal = res.data.data.count
        })
    },

    //煤业多少条
    handleSizeChange(val) {
      //切换每页显示多少条
      //console.log(`每页 ${val} 条`);
      this.good_queryInfo.pagesize = val
      this.getGoodList()
    },
    //每页数据容量
    handleCurrentChange(val) {
      //切换当前页数
      //console.log(`当前页: ${val}`);
      this.good_queryInfo.pagenum = val
      this.getGoodList()
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      alert(1)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      this.fileList = file
    },
    //添加用户
    submitAddForm() {
      //使用axios的post请求调用api完成添加功能
          this.axios
            .post(
              'https://localhost:44379/api/SexShopModel/Create',
              this.$qs.stringify({
                SexShopId: this.good_addForm.SexShopId,
                StockNumber: this.good_addForm.StockNumber,
                EndTime: this.good_addForm.EndTime,
                StartTime: this.good_addForm.StartTime,
                Status: this.good_addForm.Status,
              })
            )
            .then((res) => {
              //console.log(res)
              if (res.data.status == 1) {
                //返回成功，弹窗提示
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
                //关闭弹窗
                this.good_add_dialogVisible = false
                //刷新页面
                this.getGoodList()
              }
            })
    },
    //重置添加商品表单
    closeAddDialog() {
      this.good_add_dialogVisible = false
    },
    //回显商品信息
    showEditMessage($index) {
      //console.log(this.good_tableDate[$index],"wfwf")
      this.good_updateForm = this.good_tableDate[$index]
      this.good_update_dialogVisible = true
    },
    //提交更新用户信息
    submitUpdateForm() {
      this.$refs['good_updateFormRef'].validate(async (valid) => {
        if (valid) {
          //如果验证通过，那么使用axios调用post请求来修改
          this.axios
            .post(
              //api链接
              'https://localhost:44379/api/SexShopModel/Update',
              //这个是来用qs做一个转换，否则会报错400，数据格式错误
              this.$qs.stringify({
                ShopId: this.good_updateForm.shopId,
                ShopName: this.good_updateForm.shopName,
                ShopPrice: this.good_updateForm.shopPrice,
                ShopState: this.good_updateForm.shopState,
                ShopStock: this.good_updateForm.shopStock,
                ShopCategoryId: this.good_updateForm.shopCategoryId,
                ShopDetailCate: this.good_updateForm.shopDetailCate,
                ShopDescription: this.good_updateForm.shopDescription,
              })
            )
            .then((res) => {
              //修改完成的回调
              if (res.data.status == 1) {
                //返回成功，弹窗提示
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
                //关闭弹窗
                this.good_update_dialogVisible = false
                //刷新页面
                this.getGoodList()
              }
            })
        }
      })
    },
    //重置修改商品表单
    closeUpdateDialog() {
      this.good_update_dialogVisible = false
    },
    //删除（彻底删除）
    deleteGoods(rrr) {
      this.$confirm('是否彻底删除商品' + rrr.shopName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //alert(rrr.shopId)
          this.axios
            .post(
              'https://localhost:44379/api/SexShopModel/Delelte?id=' +
                rrr.shopId
            )
            .then((res) => {
              if (res.data.status == 1) {
                this.getGoodrecyclebin()
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>
<style lang="less" scoped>
.good_table {
  .good_table_header {
    .good_search_input {
      width: 30%;
      float: left;
    }
    .good_search_button {
      background-color: #dcdfe6;
      box-shadow: 0 0 10px #ddd; //加阴影，向外扩散10像素
      float: left;
      width: 6%;
    }
    .good_add_button {
      width: 10%;
      padding-left: 20px;
      float: left;
    }
  }
}
</style>